<template>
    <div class="card">
        <h3>{{ title }}</h3>
        <p>数量: {{ count }}</p>
    </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
    props: {
        title: {
            type: String,
            required: true
        },
        count: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        // props 可以直接在 setup 函数中使用
        return {
            title: props.title,
            count: props.count
        };
    }
});
</script>

<style scoped>
.card {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

p {
    margin-bottom: 0;
    color: #666;
}
</style>